<template>
  <div class="my-profile-wrapper">
    <avatar
      slot="reference"
      :src="qnPath(currentUserProfile.avatar)"
      class="my-avatar"
    />
    <span class="nick text-ellipsis">{{
      currentUserProfile.nick || currentUserProfile.userID
    }}</span>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'MyProfile',
  computed: {
    ...mapState({
      currentUserProfile: state => state.user.currentUserProfile,
    }),
  },
};
</script>

<style lang="stylus" scoped>
.my-profile-wrapper
  width 100%
  height 70px
  padding 10px
  box-sizing border-box
  display flex
  align-items center
.my-avatar
  width 50px
  height 50px
  cursor pointer
  border-radius: 50%;
.nick {
  font-size: 18px;
  margin-right: 8px;
  max-width: 100px;
  display: inline-block;
  color $font-light
  padding 10px
}
</style>
